<!DOCTYPE html>
<html>
	<head> 
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!-- 标题 （注释） -->
		<h1>小米8.16 </h1>
		<h2>8.16啦 </h2>
		<h3 id="h3">8.16啦 </h3> 
		
		<!-- 段落，p = parageaph-->
        <p>赶紧买啦，便宜啦，机会只有一次</p>
       
        
        <!--插入图片 -->
        <!-- alt 图片没有加载显示的文字-->
		<img src="../IMG/2d3277c7bfc14a5db5f8d06f56718b4f_367_2521.jpg" alt="加载失败"></img>
		<!-- 图片换行 有横线-->
		<hr/>
		<!-- 中间没东西-->
        <img src="../IMG/2d3277c7bfc14a5db5f8d06f56718b4f_367_252.jpg"width="400px" height="300px" />
        <!-- 图片换行没横线-->
		<br/>
		<img src="../IMG/2d3277c7bfc14a5db5f8d06f56718b4f_367_252.jpg" />
		<br />
        
        <!-- 超链接
        	target="_blank"新窗口打开
        	title="悬停文字" 鼠标放上去有悬停文字
        -->
        <a href="http://www.baidu.com" title="悬停文字" target="_blank">超链接</a>
        
        <!--  页面内的锚点使用id，使用a标签跳转指定锚点-->
        <a href="#h3">跳转h3标题</a>
        <!-- 跳转网页开头-->
        <a href="#">回开始</a>
        <hr />
        
        <!-- 
        	1、列表
        	li=list item
        	2、有序列表（有顺序的排列）
        	ol=ordered list
        	3、无序列表
        	ul=unorderes list
        -->
        
        <!--有序列表-->
        <ol>
        	<li>北京</li>
        	<li>上海</li>
        	<li>杭州</li>
        	<li>重庆</li>
        </ol>
        
        <!--无序列表
        	ul表达无序列表
        -->
        <ul>
            <li>北京</li>
        	<li>上海</li>
        	<li>杭州</li>
        	<li>重庆</li>	
        </ul>
        
        <!--无序和有序嵌套-->
        <ul>
            <li>北京</li>
        	<li>上海</li>
        	<li>杭州</li>
        	<li>重庆</li>	
        	<li>山东
        	<ol>
        	<li>济南</li>
        	<li>青岛</li>
        	<li>威海</li>		
        	</ol>
        	
        </ul>
        <hr />
        
        <!-- div division div里面所有的元素在div区域里-->
        
        <!-- span功能类似于div 但不能独占一行 ,小区域-->
             <!--<u>  下划线
             	<i>    斜体
             		
             --> 
        <div>
        	<span>
        		<u>山东省</u>
        		<i>青岛市</i> 
        		<span style="color: blue;">大润发</span>
        	</span>
        </div>
        
        <!-- 空格折叠现象
        	普通的空格连续出现多个会被当成一个空格，
        	想要显示多个使用特殊字符
        	&nbsp 连续不打断空格
        	        -->
             <div>
         	       锄禾日当&nbsp;&nbsp; 午<br />
        	        汗滴禾下&nbsp;       土<br />
        	
         	</div>
         	
        	<hr />
        	
        	<!--table
        		tr 行
        		td 列
        		border="1" 外框
        		cellspacing="0" 单元格的间隙
        		th  头部
        	-->
        	<table border="1" cellspacing="0" width="300" >
        	
        		<tr>
        			<th>讲师名称</th>
        			<th>所教班级</th>
        		</tr>
        		
            <tbody>
            	<tr>
        			<td rowspan="2">王老师</td>
        			<td>JAVA180701</td>
        		</tr>
        		
        		<tr>
        			<!--<td rowspan="2">高老师</td>-->
        			<td>JAVA180703</td>
        		</tr>
        		
        		<tr>
        			<td rowspan="2">六老师</td>
        			<td>JAVA180704</td>
        		</tr>
        		
            </tbody>
        		
        		
        	</table>
        	<br />
        	
        	
        	<!-- 行/列跨越
        		rowspan 合并行
        		cosspan 和并列
        	-->
        	<table border="1" cellspacing="0" width="300" >
        	
        		<tr>
        			<th>讲师名称</th>
        			<th>所教班级</th>
        		</tr>
        		
            <tbody>
            	<tr>
        			<td colspan="2">王老师</td>
        			<!--<td>JAVA180701</td>-->
        		</tr>
        		
        		<tr>
        			<td>高老师</td>
        			<td>JAVA180703</td>
        		</tr>
        		
        		<tr>
        			<td>六老师</td>
        			<td>JAVA180704</td>
        		</tr>
        		
            </tbody>
        		
        		
        	</table>
        	
        	          
	</body>
</html>
